<template>
  <div class="order-operate">
    <van-form @submit="onSubmit">
      <van-field v-if="operateForm.stepId == 'a012'" readonly clickable v-model="serviceKindName"
        required
        label="业务类型" placeholder="点击选择业务类型" @click="isShowService = true"
      />
      <van-popup v-model="isShowService" position="bottom">
        <van-picker
          show-toolbar value-key="name" title="业务类型"
          :columns="serviceList" @confirm="confirmService" @cancel="isShowService = false"
        />
      </van-popup>
      <van-field v-if="operateForm.stepId == 'a012'" readonly clickable v-model="serviceNextName"
        required :rules="[{ required: true, message: '请点击选择二级业务类型' }]"
        label="二级业务类型" placeholder="点击选择二级业务类型" @click="isShowServiceNext = true"
      />
      <van-popup v-model="isShowServiceNext" position="bottom">
        <van-picker
          show-toolbar value-key="serviceNextName" title="二级业务类型"
          :columns="serviceNextList" @confirm="confirmServiceNext" @cancel="isShowServiceNext = false"
        />
      </van-popup>
      <van-field class="direction" required name="radio" label="操作" :rules="[{ required: true, message: '请选择操作类型' }]">
        <template #input>
          <van-radio-group v-model="operateForm.nextStepId" direction="horizontal" @change="handleRadio">
            <van-radio v-for="item in list" :key="item.stepId" :name="item.stepId" icon-size="16px">{{ item.stepName }}</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field v-if="operateForm.nextStepId == 'a013' || operateForm.nextStepId == 'a015'" readonly is-link v-model="approveDeptName"
        required :rules="[{ required: true, message: '请点击选择调配部门' }]"
        label="调配部门" placeholder="点击选择调配部门" @click="isShowDept = true"
      />
      <van-popup v-model="isShowDept" position="bottom">
        <van-cascader
          v-model="operateForm.approveDept" title="请选择调配部门" :options="orgRadioList"
          active-color="#1989fa" @close="isShowDept = false" @change="handleDept" :field-names="fieldNames"
        />
      </van-popup>
      <van-field v-if="operateForm.nextStepId == 'a014'" readonly clickable v-model="approveUserName"
        required :rules="[{ required: true, message: '请点击选择调配中台' }]"
        label="调配中台" placeholder="点击选择调配中台" @click="isShowApproveUser = true"
      />
      <van-popup v-model="isShowApproveUser" position="bottom">
        <van-picker
          show-toolbar value-key="roleOrstaff" title="调配中台"
          :columns="transUserList" @confirm="confirmApproveUser" @cancel="isShowApproveUser = false"
        />
      </van-popup>
      <van-field v-model="operateForm.approveMsg" label="处理意见" rows="2" autosize
        placeholder="请输入" type="textarea"
        maxlength="200" show-word-limit 
      />
      <div class="order-save">
        <van-button type="info" text="提交" native-type="submit" block />
      </div>
    </van-form>
  </div>
</template>

<script>
import { nextStep, orderDetail, serviceKindList, serviceKindNameList, orgList, transUser, approveSave } from '@/api/order.js'
import { Dialog, Toast } from 'vant'

export default {
  data() {
    return {
      serviceKindName: '',
      serviceNextName: '',
      isShowService: false,
      serviceList: [], // 业务类型
      isShowServiceNext: false,
      serviceNextList: [], // 二级业务类型
      operateForm: {
        orderId: '',
        stepId: '',
        messageWorkitemId: '',
        processInstanceId:'',
        serviceKind: '',
        serviceNextKind: '',
        nextStepId: '',
        nextStepName: '',
        approveUser: '',
        approveDept: '',
        approveMsg: ''
      },
      approveDeptName: '',
      isShowDept: false,
      orgRadioList: [],
      fieldNames: {
        text: 'title',
        value: 'value',
        children: 'children',
      },
      list: [],
      transUserList: [],
      approveUserName: '',
      isShowApproveUser: false
    }
  },
  mounted() {
    this.operateForm.orderId = this.$route.query.orderId
    this.operateForm.stepId = this.$route.query.stepId
    this.operateForm.messageWorkitemId = this.$route.query.messageWorkitemId
    this.operateForm.processInstanceId = this.$route.query.processInstanceId
    this.getDetail()
    this.getStep()
  },
  beforeDestroy() {
    Toast.clear()
  },
  methods: {
    // 详情
    async getDetail() {
      const res = await orderDetail({ orderId: this.operateForm.orderId })
      const { success, result } = res
      if(success) {
        const info = result.order
        this.operateForm.serviceKind = info.serviceId
        this.serviceKindName = info.serviceKind
        this.operateForm.serviceNextKind = info.serviceNextId
        this.serviceNextName = info.serviceNextKind
        this.getServiceKindList(info.orderTypeId)
        this.getServiceKindNameList(this.operateForm.serviceKind)
        this.operateForm.approveDept = result.user.areaNo
      }
    },
    // 选择业务类型popup
    confirmService(val) {
      this.isShowService = false
      this.operateForm.serviceKind = val.id
      this.serviceKindName = val.name
      this.operateForm.serviceNextKind = ''
      this.serviceNextName = ''
      this.getServiceKindNameList(this.operateForm.serviceKind)
    },
    // 业务类型数据
    async getServiceKindList(orderType) {
      const res = await serviceKindList({ orderType })
      const { result, success } = res
      if (success) {
        this.serviceList = result
      }
    },
    // 选择二级业务类型popup
    confirmServiceNext(val) {
      this.isShowServiceNext = false
      this.operateForm.serviceNextKind = val.serviceNextKind
      this.serviceNextName = val.serviceNextName
    },
    // 二级业务类型数据
    async getServiceKindNameList(serviceKind) {
      const res = await serviceKindNameList({ serviceKind })
      const { result, success } = res
      if (success) {
        this.serviceNextList = result
      }
    },
    // 获取当前可选操作
    async getStep() {
      const res = await nextStep({ stepId: this.operateForm.stepId })
      const { success, message, result } = res
      if(success) {
        this.list = result.UNI_BSS_BODY.STEP_PATH_RSP.data
      } else {
        Dialog.alert({ message })
      }
    },
    // 选择操作按钮
    handleRadio(val) {
      this.operateForm.nextStepId = val
      const sel = this.list.filter(item => item.stepId == val)
      this.operateForm.nextStepName = sel[0].stepName
      if(this.operateForm.nextStepId == 'a013' || this.operateForm.nextStepId == 'a015') {
        if(this.operateForm.nextStepId == 'a015') this.operateForm.approveDept = '001400'
        this.getOrgList(false)
      }
      if(this.operateForm.nextStepId == 'a014') {
        this.getTransUser()
      }
    },
    // 获取组织机构
    async getOrgList(isFlag, tabIndex, selectedOptions) {
      const res = await orgList({ parOrgId: this.operateForm.approveDept })
      const { success, message, result } = res
      if(success) {
        if(isFlag) {
          selectedOptions[tabIndex].children = result
          this.$set(this.orgRadioList[tabIndex], 'children', result)
        } else {
          this.orgRadioList = result
        }
      } else {
        Dialog.alert({ message })
      }
    },
    handleDept({ value, selectedOptions, tabIndex }){
      this.operateForm.approveDept = value
      this.approveDeptName = selectedOptions[tabIndex].title
      if (value === this.orgRadioList[0].value) {
        this.orgRadioList[0].children = []
      }
      if(selectedOptions[0].leaf == '1') {
        Toast('已到根结点！')
        this.orgRadioList[0].children = []
        return
      } else {
        this.getOrgList(true, tabIndex, selectedOptions)
      }
    },
    // 中台转派人员
    async getTransUser() {
      const res = await transUser({ orderId: this.operateForm.orderId })
      const { success, result } = res
      if(success) {
        this.transUserList = result.map(item => {
          return {
            roleOrstaff: `${item.roleName} - ${item.staffName}`,
            ...item
          }
        })
      }
    },
    confirmApproveUser(val) {
      this.isShowApproveUser = false
      this.operateForm.approveUser = val.accountCode
      this.approveUserName = val.roleOrstaff
    },
    onSubmit() {
      Dialog.confirm({
        message: '确定提交工单？',
      })
      .then(() => {
        Toast({
          type:'loading',
          duration: 0,
          message: '处理中...',
          position: 'bottom',
          forbidClick: 'true'
        })
        this.saveApprove()
      })
      .catch(() => {
        
      })
    },
    // 草稿
    async saveApprove() {
      const res = await approveSave({ ...this.operateForm })
      const { success, message } = res
      if(success) {
        this.$open.call(this, '/order/overview')
      } else {
        Dialog.alert({ message })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.order-operate {
  background: #ffffff;
  box-shadow: 0 2px 4px 1px #f3f7fa;
  border-radius: 6px;
  padding: 12px 8px;
  margin: 6px 8px;
  /deep/ .van-cell.direction {
    flex-direction: column;
    .van-field__control {
      justify-content: flex-end;
    }
  }
  .order-save {
    margin-top: 8px;
  }
}
</style>
